<template>
  <div class="dndList">
    <div :style="{width:width1}" class="dndList-list">
      <div class="area-header"><span class="area-header-title">{{ list1Title }}</span></div>
      <draggable :set-data="setData" :list="list1" group="article" class="dragArea" :move="dropHidden" @remove="remove" @end="mouseenter">
        <div v-for="element in list1" :key="element.id" class="list-complete-item">
          <i class="el-icon-thumb iconPointer" />
          <div class="list-complete-item-handle">
            {{ element.name }}
          </div>
          <div class="hoverShow">
            <span @click="deleteHandle(element)">
              <i style="color:#fff" class="el-icon-delete" />
            </span>
            <span @click="updateHandle(element)">
              <i style="color:#fff" class="el-icon-edit" />
            </span>
          </div>
        </div>
      </draggable>
    </div>
    <div :style="{width:width2}" class="dndList-list">
      <div class="area-header"><span class="area-header-title">{{ list2Title }}</span></div>
      <draggable :list="list2" group="article" class="dragArea" :move="dropshow" @remove="shown">
        <div v-for="element in list2" :key="element.id" class="list-complete-item">
          <i class="el-icon-thumb iconPointer" />
          <div class="list-complete-item-handle2" @click="pushEle(element)">
            {{ $t(element.name) }}
          </div>
          <div class="hoverShow">
            <span style="" @click="deleteHandle(element)">
              <i style="color:#fff" class="el-icon-delete" />
            </span>
            <span style="" @click="updateHandle(element)">
              <i style="color:#fff" class="el-icon-edit" />
            </span>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import { updateSelectStatus, viewSort, delMainView } from '@/api/system/search/searchMainView'
  export default {
    name: 'DndList',
    components: { draggable },
    props: {
      list1: {
        type: Array,
        default() {
          return []
        }
      },
      list2: {
        type: Array,
        default() {
          return []
        }
      },
      list1Title: {
        type: String,
        default: 'list1'
      },
      list2Title: {
        type: String,
        default: 'list2'
      },
      width1: {
        type: String,
        default: '100%'
      },
      width2: {
        type: String,
        default: '100%'
      }
    },
    data() {
      return {
        moveId: '',
        moveName: '',
        showId: '',
        showName: ''
      }
    },
    methods: {
      isNotInList1(v) {
        return this.list1.every(k => v.id !== k.id)
      },
      isNotInList2(v) {
        return this.list2.every(k => v.id !== k.id)
      },
      /** 删除按钮操作 */
      deleteHandle(row) {
        if (this.list1.length === 1) {
          this.msgWarning(this.$t('不能全部删除'))
        } else {
          this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
            confirmButtonText: this.$t('确定'),
            cancelButtonText: this.$t('取消'),
            type: 'warning'
          }).then(() => {
            return delMainView(row.id)
          }).then(() => {
            this.$parent.getList()
            this.$parent.$parent.$parent.getViewList()
            this.msgSuccess(this.$t('删除成功'))
          }).catch(function() {
          })
        }
      },
      updateHandle(ele) {
        this.$parent.formOpen = true
        this.$parent.title = this.$t('修改高级查询')
        this.$nextTick(() => {
          this.$parent.$refs.sysSearchMainForm.init(ele)
          this.$parent.$refs.sysSearchMainForm.load()
        })
      },
      pushEle(ele) {
        for (const item of this.list2) {
          if (item.id === ele.id) {
            const index = this.list2.indexOf(item)
            this.list2.splice(index, 1)
            break
          }
        }
        if (this.isNotInList1(ele)) {
          this.list1.push(ele)
        }
      },
      setData(dataTransfer) {
        dataTransfer.setData('Text', '')
      },
      dropHidden(e) { // 隐藏
        this.moveId = e.draggedContext.element.id
        this.moveName = e.draggedContext.element.name
      },
      dropshow(e) { // 显示
        this.showId = e.draggedContext.element.id
        this.showName = e.draggedContext.element.name
      },
      mouseenter() {
        viewSort(this.list1).then(() => {
          this.$parent.$parent.$parent.getViewList()
        })
      },
      remove() {
        updateSelectStatus(this.moveId, 'N').then(() => {
          this.$parent.$parent.$parent.getViewList()
          }).catch(function() {})
      },
      shown() {
        updateSelectStatus(this.showId, 'Y').then(() => {
          return viewSort(this.list1)
        }).then(() => {
          this.$parent.$parent.$parent.getViewList()
        }).catch(function() {})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dndList {
    background: #fff;
    padding-bottom: 40px;
    &:after {
      content: "";
      display: table;
      clear: both;
    }
    .dndList-list {
      float: left;
      &:first-of-type {
        margin-right: 2%;
      }
      .dragArea {
        margin-top: 15px;
        min-height: 50px;
        padding-bottom: 30px;
      }
    }
  }
  .hoverShow{
    position: absolute;
    right: 0px;
    background: rgba(0,0,0,.65);
    top: 0;
    bottom: 0;
    left: 30px;
    min-width: 50px;
    display: none;
    span:first-child {
      float: right ;margin-top: 6px;margin-right:5px;
    }
    span:last-child {
      float: right ;margin-top: 6px;margin-right:10px;
    }
  }
  .list-complete-item:hover .hoverShow{
    display: block;
  }
  .list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 7px 10px;
    margin-top: 4px;
    background: #86baff;
    color: #fff;
    transition: all 1s;
    display: inline-block;
    margin: 3px;
    padding-right: 5px;
    min-width: 80px;
  }
  .iconPointer{
    display: inline-block;
    color: #fff;
    border-right: 1px solid #fff;
    padding-right: 8px;
    cursor: move;
  }

  .list-complete-item-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: initial;
    font-size: 13px;
    padding: 0 6px;
  }

  .list-complete-item-handle2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: initial;
    font-size: 13px;
    padding: 0 6px;
  }

  .list-complete-item.sortable-chosen {
    background: #46A6FF;
  }

  .list-complete-item.sortable-ghost {
    background: #83C4FC;
  }

  .list-complete-enter,
  .list-complete-leave-active {
    opacity: 0;
  }
</style>
